<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" title="综合" disabled/>
      <van-dropdown-item v-model="value1" :options="option1" title="价格" @change="priceChange" />
      <van-dropdown-item v-model="value2" :options="filterCategory" title="分类" @change="categoryChange" />
    </van-dropdown-menu>
  
  <van-empty v-if="productsListData.length==0" description="抱歉没有该商品" />
  <Products v-else :productsListData="productsListData" />
  </div>
</template>

<script>
import Products from '../Products.vue'
export default {
  props:['productsListData','filterCategory'],
  components:{
    Products
  },
  methods:{
    priceChange(value){
      this.$emit('priceChange',value)
    },
    categoryChange(value){
      this.$emit('categoryChange',value)
    }
  },
  beforeUpdate(){
    this.filterCategory.map(item=>{
      if(item.checked){
        this.value2 = item.value
      }
    })
  },
  data () {
    return {
      value1: '',
      value2: 0,
      option1: [
        { text: '价格由高到低', value: 'desc' },
        { text: '价格由低到高', value: 'asc' },
       
      ],
      // option2: [
      //   { text: '全部', value: 'a' },
      //   { text: '居家', value: 'b' },
        
      // ],
 
    }
  }
}
</script>
 
<style lang = "less" scoped>
  
</style>